<template>
    <div class="color-blue-500 bg-white">
        <!-- <p class="text-rose-800">参数</p> -->
        <el-card>
            <el-descriptions
                class="margin-top"
                :title="getName"
                :column="3"
                border
            >
                <template #extra>
                    <!-- <router-link :to="{name: 'details'}">
                        <el-button type="primary">详情</el-button>
                    </router-link> -->
                </template>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon>
                                <user />
                            </el-icon>
                            车身
                        </div>
                    </template>
                    {{ data.carStyle || '——' }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon>
                                <user />
                            </el-icon>
                            排量
                        </div>
                    </template>
                    {{ data.cc || '——' }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon>
                                <user />
                            </el-icon>
                            变速器
                        </div>
                    </template>
                    {{ data.derailleur || '——' }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon>
                                <user />
                            </el-icon>
                            发动机
                        </div>
                    </template>
                    {{ data.engineName || '——' }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon>
                                <user />
                            </el-icon>
                            制造日期
                        </div>
                    </template>
                    {{ data.manufactureDate || '——' }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon>
                                <user />
                            </el-icon>
                            车型
                        </div>
                    </template>
                    {{ data.vehicleModel || '——' }}
                </el-descriptions-item>
            </el-descriptions>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { useRequest } from 'alova'
import { getInfoById, getData } from "@/api/list/shop"
import { computed } from 'vue'

const { dataList } = useRequest(getData, {
    // 请求响应前，data的初始值
    initialData: []
})
console.log('dataList', dataList)

const { data } = useRequest(getInfoById, {
    // 请求响应前，data的初始值
    initialData: []
})
console.log('data', data)

const getName = computed(() => {
    return (data.brandName || '——') + ' ' + (data.vinCode || '——')
})

</script>

<style scoped>

</style>